Ext.ns('Ext.ux.form');

Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {
    buttonText: 'Browse...',
    buttonOnly: false,
    buttonOffset: 3,
    readOnly: true,
    autoSize: Ext.emptyFn,
    initComponent: function(){
        Ext.ux.form.FileUploadField.superclass.initComponent.call(this);
        this.addEvents('fileselected');
    },
    onRender: function(ct, position){
        Ext.ux.form.FileUploadField.superclass.onRender.call(this, ct, position);
        this.wrap = this.el.wrap({
            cls: 'x-form-field-wrap x-form-file-wrap'
        });
        this.el.addClass('x-form-file-text');
        this.el.dom.removeAttribute('name');
        this.fileInput = this.wrap.createChild({
            id: this.getFileInputId(),
            name: this.name || this.getId(),
            cls: 'x-form-file',
            tag: 'input',
            type: 'file',
            size: 1
        });
        var btnCfg = Ext.applyIf(this.buttonCfg || {}, {
            text: this.buttonText
        });
        this.button = new Ext.Button(Ext.apply(btnCfg, {
            renderTo: this.wrap,
            cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon' : '')
        }));
        if (this.buttonOnly) {
            this.el.hide();
            this.wrap.setWidth(this.button.getEl().getWidth());
        }
        this.fileInput.on('change', function(){
            var v = this.fileInput.dom.value;
            this.setValue(v);
            this.fireEvent('fileselected', this, v);
        }, this);
    },
    getFileInputId: function(){
        return this.id + '-file';
    },
    onResize: function(w, h){
        Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);
        this.wrap.setWidth(w);
        if (!this.buttonOnly) {
            w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset;
            this.el.setWidth(w);
        }
    },
    onDestroy: function(){
        Ext.ux.form.FileUploadField.superclass.onDestroy.call(this);
        Ext.destroy(this.fileInput, this.button, this.wrap);
    },
    preFocus: Ext.emptyFn,
    getResizeEl: function(){
        return this.wrap;
    },
    getPositionEl: function(){
        return this.wrap;
    },
    alignErrorIcon: function(){
        this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);
    }
});

Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);

Ext.form.FileUploadField = Ext.ux.form.FileUploadField;
